<template>
  <view class="container">
    <!-- 公司头图 -->
    <view class="company-header">
      <image :src="baseUrl+company.logo" class="company-logo" mode="aspectFit" />
      <text class="company-name">{{ company.name }}</text>
      <view class="company-tags">
        <text class="company-tag">{{ company.industry }}</text>
        <text class="company-tag">{{ company.employees }}人</text>
        <text class="company-tag" style="background:lightblue;">{{ position.delFlag }}积分</text>
      </view>
    </view>

    <!-- 职位主体 -->
    <scroll-view class="main-content" scroll-y>
      <!-- 核心信息卡片 -->
      <view class="info-card">
        <text class="position-title">{{ position.title }}</text>
        <view class="salary-tag">
          <text class="salary">{{ position.salary }}</text>
          <text class="salary-unit"></text>
        </view>
        
        <view class="meta-grid">
          <view class="meta-item">
            <image src="/static/icon-location.png" class="meta-icon" />
            <text>{{ position.location }}</text>
          </view>
          <view class="meta-item">
            <image src="/static/icon-time.png" class="meta-icon" />
            <text>{{ position.duration }}</text>
          </view>
          <view class="meta-item">
            <image src="/static/icon-type.png" class="meta-icon" />
            <text>{{ position.type }}</text>
          </view>
        </view>
      </view>

      <!-- 职位详情 -->
      <view class="detail-section">
        <view class="section-title">
          <image src="/static/mine.png" class="title-icon" />
          <text>职位详情</text>
        </view>
        <view class="duty-list">
          <view v-for="(duty,index) in position.duties" :key="index" class="duty-item">
            <view class="dot" style="color: white;">..</view>
            <text>{{ duty }}</text>
          </view>
        </view>
      </view>

      <!-- 任职要求 -->
      <view class="detail-section">
        <view class="section-title">
          <image src="/static/icon-require.png" class="title-icon" />
          <text>我们希望你</text>
        </view>
        <view class="requirement-grid">
          <view v-for="(req,index) in position.requirements" :key="index" class="req-tag">
            {{ req }}
          </view>
        </view>
      </view>

      <!-- 发展前景 -->
     <view class="promotion-card">
       <view class="promotion-header">
         <text class="title">状态</text>
       <!--  <view class="conversion-badge">
           <text class="rate">{{ position.conversionRate }}%</text>
           <text class="label">转正率</text>
         </view> -->
       </view>
     
       <view class="timeline">
         <view 
           v-for="(stage, index) in position.promotionPath"
           :key="index"
           class="timeline-item"
           :style="{width: `${100/(position.promotionPath.length-1)}%`}"
         >
		 
        <view class="node" :class="{active: index === (applyInfo?(applyInfo.status==1?2:1):0)}">
            <text v-if="index === (applyInfo?(applyInfo.status==1?2:1):0)" class="current-tag">当前</text>
          </view>
		  
           <text class="stage-name">{{ stage }}</text>
         </view>
       </view>
     </view>
    </scroll-view>

    <!-- 悬浮操作栏 -->
    <view class="action-bar">
      <button class="btn-collect" @click="showQRCode">
        <image src="/static/icon-star.png" mode="widthFix" />
      </button>
      <button class="btn-apply" @click="handleApply">
        {{ isApply ? '已申请' : '发送简历' }}
      </button>
    </view>
  </view>
</template>

<script setup>
	import baseUrl from '../../../utils/baseUrl';
	import { onMounted, reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { http } from '../../../utils/requestUtil';

const position = reactive({
  title: "8（可转正）",
  type: "8",
  location: "8",
  duration: "8",
  salary: "8",
  duties: [
    "8",
    "8",
    "8",
    "8"
  ],
  requirements: [
    "88",
    "88/SQL",
    
  ],
  delFlag:"1000",
  conversionRate: 8,
  promotionPath: ["8→分析师→高级分析师→投资经理"]
})

const company = reactive({
  name: "8",
  logo: "/static/company-logo.png",
  industry: "8",
  employees: '',
  revenue: 8,
  highlights: [
    "A股上市企业（300624.SZ）",
    "国家级高新技术企业",
    "全球14个研发中心",
    "新员工导师制培养"
  ]
})
const isApply=ref(false)
const applyInfo = ref(null)
const loadApply=async()=>{
	//查出来的只有状态
const res =await http.get('/internship/application/isApplication',{
			positionId:position.positionId,
			userId:uni.getStorageSync('userId')
		})
		if(res.data == undefined || res.data == null){
			isApply.value=false
		}else{
			applyInfo.value=res.data
			isApply.value=true
		}
		console.log(res.data)
}
const handleApply = async() => {
	if(isApply.value){
		uni.showToast({
		     title: '请勿重复投递',
		     icon: 'none'
		   });
		return
	}
	if(uni.getStorageSync('userInfo').score <parseInt(position.delFlag)){
		uni.showToast({
		     title: '可用积分不足',
		     icon: 'none'
		   });
		return
	}
	try{
		const res =await http.post('/internship/application?score='+parseInt(position.delFlag),{
			positionId:position.positionId,
			userId:uni.getStorageSync('userId')
		})
		isApply.value=true
		// return
		// 从本地存储获取 userInfo 数据
		let userInfo = uni.getStorageSync('userInfo');
		    // 将 score 减去 1500
		userInfo.score = userInfo.score - 1500;
		uni.setStorageSync('userInfo', userInfo);
		
	}catch(e){
		console.log(e)
		 uni.showToast({
		      title: '投递失败，请稍后重试',
		      icon: 'none'
		    });
	}
}

const showQRCode = () => {
  uni.showModal({
    title: '在线咨询',
    content: '请扫描客服二维码咨询',
	success: (res) => {
	      if (res.confirm) {
	        uni.navigateTo({
	        	url:'/pages/temp/temp'
	        })
	      } else if (res.cancel) {
	        console.log('用户点击了取消按钮');
	        // 在这里可以添加用户点击取消后的逻辑
	      }
	    },
	    fail: (err) => {
	      console.error('弹出模态框失败', err);
	    }
  })
}
onLoad(async (options) => {
	
  try {
    const res = await http.get(`/internship/position/positionDetail/${options.id}/${options.cId}`);
    if (res.code === 200) {
      // 职位信息转换
	  position.positionId = res.data.positionId;
      position.title = res.data.title;
      position.type = res.data.type;
      position.location = res.data.location;
      position.duration = res.data.duration;
      position.salary = res.data.salary // 修正薪资单位.replace(/年/g, '天');
      position.duties = res.data.duties.split(/[。]/).filter(Boolean); // 拆分职责
      position.requirements = res.data.requirements.split(/[。]/).filter(Boolean); // 拆分要求
      position.conversionRate = parseInt(res.data.conversionRate) || 0;
      position.promotionPath = res.data.promotionPath.split(/→|->/).map(s => s.trim());//.split(/→|->/).map(s => s.trim())
	  position.delFlag=res.data.delFlag
      // // 公司信息转换
      company.name = res.data.companyName;
      company.logo = res.data.logoUrl;
      company.industry = res.data.industry;
      company.employees = res.data.employees || '*';
      company.revenue = parseFloat(res.data.revenue) ||'*';
      company.highlights = [ // 静态示例数据，可根据实际业务需求调整
        `${company.employees}+人规模企业`,
        `${company.industry}领域领先企业`,
        `年度营收${company.revenue}亿元`
      ];

      // // 强制更新视图
      // this.position = { ...this.position };
      // this.company = { ...this.company };
    }
  } catch (error) {
    console.error('数据加载失败:', error);
    uni.showToast({ title: '详情加载失败', icon: 'none' });
  }
  loadApply()
});
</script>


<style scoped>
.container {
  background: #f5f7fa;
  min-height: 100vh;
}

.company-header {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  padding: 48rpx 32rpx;
  color: white;
}

.company-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  background: rgba(255,255,255,0.1);
}

.company-name {
  font-size: 40rpx;
  font-weight: 600;
  margin-bottom: 16rpx;
  display: block;
}

.company-tags {
  display: flex;
  gap: 16rpx;
}

.company-tag {
  padding: 8rpx 24rpx;
  background: rgba(255,255,255,0.15);
  border-radius: 40rpx;
  font-size: 24rpx;
}

.info-card {
  background: white;
  margin: 24rpx;
  padding: 32rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(99,102,241,0.1);
}

.position-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16rpx;
}

.salary-tag {
  background: #f0fdf4;
  border-radius: 16rpx;
  padding: 16rpx 24rpx;
  display: inline-flex;
  align-items: baseline;
}

.salary {
  color: #10b981;
  font-size: 48rpx;
  font-weight: 700;
  margin-right: 8rpx;
}

.salary-unit {
  color: #6b7280;
  font-size: 28rpx;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32rpx;
  margin-top: 32rpx;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.meta-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}

.detail-section {
  background: white;
  margin: 24rpx;
  padding: 32rpx;
  border-radius: 24rpx;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 32rpx;
}

.title-icon {
  width: 40rpx;
  height: 40rpx;
}

.duty-list {
  padding-left: 32rpx;
}

.duty-item {
  display: flex;
  gap: 16rpx;
  margin-bottom: 24rpx;
  line-height: 1.6;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  background: #6366f1;
  border-radius: 50%;
  margin-top: 16rpx;
}

.requirement-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
}

.req-tag {
  background: #f8fafc;
  padding: 16rpx;
  border-radius: 12rpx;
  text-align: center;
  color: #3b82f6;
  font-weight: 500;
}

.promotion-card {
  background: white;
  margin: 24rpx;
  margin-bottom: 60rpx;
  padding: 32rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.05);
}

.promotion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48rpx;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

.conversion-badge {
  background: #f0fdf4;
  border-radius: 16rpx;
  padding: 12rpx 24rpx;
  text-align: center;
}

.rate {
  color: #10b981;
  font-size: 36rpx;
  font-weight: 700;
  display: block;
}

.label {
  color: #6b7280;
  font-size: 24rpx;
}

.timeline {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 48rpx 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 72rpx;
  left: 0;
  right: 0;
  height: 4rpx;
  background: #e5e7eb;
  z-index: 0;
}

.timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.node {
  width: 48rpx;
  height: 48rpx;
  background: #fff;
  border: 4rpx solid #e5e7eb;
  border-radius: 50%;
  position: relative;
  z-index: 0;
  margin-bottom: 24rpx;
  transition: all 0.3s;
}

.node.active {
  border-color: #3b82f6;
  background: #3b82f6;
  box-shadow: 0 8rpx 16rpx rgba(59,130,246,0.2);
}

.current-tag {
  position: absolute;
  top: -36rpx;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24rpx;
  color: #3b82f6;
  white-space: nowrap;
}

.stage-name {
  font-size: 28rpx;
  color: #4b5563;
  text-align: center;
  line-height: 1.4;
  width: 150rpx;
  margin-top: 16rpx;
}

.conversion-rate {
  font-size: 28rpx;
  opacity: 0.9;
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 16rpx 32rpx;
  display: flex;
  gap: 24rpx;
  box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.1);
}

.btn-collect {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.btn-collect image {
  width: 40rpx;
}

.btn-apply {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 48rpx;
  border: none;
}

.btn-apply[disabled] {
  background: #94a3b8;
  opacity: 0.8;
}
</style>